<template>
	<view class="bgf9">
		<!-- 头部 -->
		<view style="width: 100vw;height: 24rpx;background: #FFFFFF;position: fixed;top: 0;"></view>
		<view class="SJtop fs16">
			<view class="yuzhou" style="position: relative;">
				<image src="../../static/icon2167.png" mode=""></image>
				<text class="fs13">宇宙</text>
			</view>
			订单
		</view>
		<view style="width: 100%;position: fixed;top: 110rpx;">
			<view>
				<u-tabs-swiper ref="uTabs" bg-color="#fff" :list="list" :current="current"  count="cate_count"
					@change="tabsChange" :is-scroll="false" swiperWidth="750" inactive-color="#333333"
					active-color="#24BC81"></u-tabs-swiper>
			</view>
			<swiper style="height: 100vh;" :current="swiperCurrent" @transition="transition"
				@animationfinish="animationfinish">
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="width: 100%;height: 100vh;" @scrolltolower="onreachBottom">
						<DJD></DJD>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="width: 100%;height: 100vh;" @scrolltolower="onreachBottom">
						<DPS></DPS>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="width: 100%;" @scrolltolower="onreachBottom">
						<PSZ></PSZ>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="width: 100%;" @scrolltolower="onreachBottom">
						<YWC></YWC>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 底部TABBAR -->
		<view class="QStabbar fs10">
			<navigator @click="TABBAR(0)" class="Tabbar" style="width: 50%;" url="">
				<image v-if="idx == 0" src="../../static/icondindan1.png" mode=""></image>
				<image v-else src="../../static/icondindan2.png" mode=""></image>
				<text :class="idx==0?'greens':''">订单</text>
			</navigator>
			<navigator @click="TABBAR(2)" class="Tabbar" style="width: 50%;" url="./QSMyde/QSMyde">
				<image v-if="idx == 2" src="../../static/iconwd1.png" mode=""></image>
				<image v-else src="../../static/iconwd2.png" mode=""></image>
				<text :class="idx==2?'greens':''">我的</text>
			</navigator>
		</view>
	</view>
</template>

<script>
	import DJD from "./Daijiedan/Daijiedan"
	import DPS from './Daipeisong/Daipeisong'
	import PSZ from './Peisongzhong/Peisongzhong'
	import YWC from './Yiwancheng/Yiwancheng'
	export default {
		components: {
			DJD,DPS,PSZ,YWC
		},
		data() {
			return {
				list: [{
					name: '待接单',
					cate_count:1
				}, {
					name: '待配送',
					cate_count:0
				}, {
					name: '配送中',
					cate_count:0
				}, {
					name: '已完成',
					cate_count:0
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				idx: 0
			}
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {

			},
			TABBAR(idx) {
				this.idx = idx
			}
		}
	}
</script>

<style>
	.SJtop {
		width: 100vw;
		height: 88rpx;
		text-align: center;
		line-height: 88rpx;
		color: rgba(51,51,51,1);
		background: #FFFFFF;
		position: fixed;
		top: 24rpx;
	}

	.yuzhou>image {
		width: 20rpx;
		height: 24rpx;
		position: absolute;
		left: 20rpx;
		top: 33rpx;
	}

	.yuzhou>text {
		position: absolute;
		left: 55rpx;
	}
</style>
